<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<div id="app">
    <div class="nav">
        <div class="main">
            <i class="iconfont iconHeader">&#xe607;</i>
            <span>讲师团</span>
            <i class="iconfont iconjiao_1" @click="zhankai(1)">&#xe61a;</i>
            <i class="iconfont iconjiao_2" @click="zhankai(2)">&#xe64e;</i>
        </div>
    </div>
    <div class="mastr_small" id="mastr">
        <div class="main">
            <div class="master_box" v-for="list in teacher">
                <img :src="list.teacher_avatar" alt="">
                <div class="biaoqian"><span>{{list.teacher_degree}}</span></div>
                <div class="master_name">{{list.teacher_name}}</div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
    <div class="nav">
        <div class="main">
            <i class="iconfont iconHeader">&#xe612;</i>
            <span>课程特色</span>
        </div>
    </div>
    <div class="courseFeature">
        <div class="main"></div>
    </div>
    <div class="nav">
        <div class="main">
            <i class="iconfont iconHeader">&#xe60d;</i>
            <span>课程列表</span>
        </div>
    </div>
    <div class="list_box" v-for="list in course">
        <div class="nav" style="border-bottom: 1px solid transparent">
            <div class="main">
                <span style="margin-left: 0.2rem" v-if="list.video_level_flag == 1">初级</span>
                <span style="margin-left: 0.2rem" v-if="list.video_level_flag == 2">中级</span>
                <span style="margin-left: 0.2rem" v-if="list.video_level_flag == 3">高级</span>

            </div>
        </div>
        <div class="course_list_box">
            <div class="main">
                <div class="course_img_box" v-for="li in list.video_list" @click="tiaozhuan(li.video_is_free,li.video_url)">
                    <img :src="li.video_cover" alt="">
                    <div class="course_info_box">
                        <span class="teacher_name"><span>{{li.video_teacher}}</span></span>
                        <span class="bofangliang">{{li.video_views}}</span>
                        <i class="iconfont">&#xe610;</i>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
    <div class="clear" style="height: 1.5rem"></div>
    <img class="down" style="width: 10rem;position: fixed;bottom: 0;z-index: 2;" src="img/dowm.png" alt="">
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="js/rem.js"></script>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    var id = getUrlParam('curriculum_id');
    var app = new Vue({
        el: '#app',
        data: {
            teacher:{},
            data:{},
            course:{}
        },
        created: function () {
            this.getData();
        },
        methods: {
            getData:function () {
                var that = this;
                $.ajax({
                    url: "/api/curriculum/share_system_detail",    //请求的url地址
                    headers: {
                        appid: '1',
                        appsecret: '39b3567d0b8ac89c025b78beec26acb0',
                    },
                    dataType: "json",   //返回格式为json
                    async: true,
                    data: {curriculum_id:id},    //参数值 由APP传递
                    type: "post",
                    success: function (req) {
                        that.data = req.data;
                        document.title = req.data.curriculum_name;
                        $(".courseFeature .main").html(req.data.curriculum_description)
                        var imgArr = $("img");
                        $.each(imgArr, function(){
                            $(this).attr('class','imgWitch')
                            $('.imgWitch').css('max-width','100%')
                        });
                        that.teacher = req.data.teacher;
                        that.course = req.data.video;
                        console.log('返回数据', req.data)
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
            },
            zhankai:function (data) {
                if(data == 1){
                    $('#mastr').removeClass('mastr_small');
                    $('#mastr').addClass('mastr_big');
                    $('.iconjiao_1').css('display','none')
                    $('.iconjiao_2').css('display','block')
                }
                if(data == 2){
                    $('#mastr').removeClass('mastr_big');
                    $('#mastr').addClass('mastr_small');
                    $('.iconjiao_1').css('display','block')
                    $('.iconjiao_2').css('display','none')

                }
            },
            tiaozhuan:function (free,url) {
                if(free == 0){
//                    window.location.href = 'list.html?url='+url;
                }

            }
        }

    })
</script>
</html>